<template>
  <div class="content">
    <div class="list_warpper">
      <el-table
        :data="tableData"
        style="width: 1140px"
        v-loading="loading"
        :row-style="{ height: '80px' }"
        :header-row-style="{ height: '100px', color: '#909399' }"
        :default-sort="{
          prop: orderValue,
          order: orderTypeValue === 'asc' ? 'ascending' : 'descending',
        }"
        @sort-change="handleSortChange"
      >
        <el-table-column label="期刊名称" width="200" align="center" :format="formatJournalTitle">
          <template #default="{ row }">
            <span class="full_name text_color_primary">{{ row.journalTitle }}</span>
            <div class="abbr text_color_secondary margin-top-10">{{ row.abbrJournal }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="journalDb" label="数据库" sortable="custom" align="center" />
        <el-table-column
          prop="impactFactor_2019"
          label="影响因子"
          sortable="custom"
          align="center"
        />
        <el-table-column prop="quote_factor" label="引文指标" sortable="custom" align="center" />
        <el-table-column prop="jcrJson" label="JCR分区" align="center" :formatter="formatJcrJson" />
        <el-table-column
          prop="subZone"
          label="国内分区"
          sortable="custom"
          align="center"
          :formatter="formatSubZone"
        />
        <el-table-column
          prop="annualPublication"
          label="年发文量"
          sortable="custom"
          align="center"
          :formatter="formatAnnualPublication"
        />
        <el-table-column
          prop="totalReviewRatio"
          label="综述占比"
          sortable="custom"
          align="center"
          :formatter="formatTotalReviewRatio"
        />
        <el-table-column
          prop="open_ratio"
          label="是否开源/开源占比"
          sortable="custom"
          align="center"
          :formatter="formatOpenRatio"
        />
        <el-table-column
          prop="openAccess"
          label="是否国产"
          align="center"
          :formatter="formatOpenAccess"
        />
        <template #append>
          <div class="pagination_container">
            <el-pagination
              background
              layout="prev, pager, next, jumper"
              :total="total"
              :pager-count="7"
              @current-change="handleCurrentChange"
            />
          </div>
        </template>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import {
  formatJcrJson,
  formatJournalTitle,
  formatOpenAccess,
  formatOpenRatio,
  formatAnnualPublication,
  formatSubZone,
  formatTotalReviewRatio,
} from '../format'
import { useRoute } from 'vue-router'
const route = useRoute()
const orderValue = ref('')
const orderTypeValue = ref('')

const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  total: {
    type: Number,
    default: 0,
  },
  loading: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['handleCurrentChange', 'handleSortChange'])
// 页码改变
const handleCurrentChange = (value) => {
  emits('handleCurrentChange', value)
}

// 排序
const handleSortChange = (column) => {
  if (column.order === 'ascending') {
    emits('handleSortChange', column.prop, 'asc')
  } else if (column.order === 'descending') {
    emits('handleSortChange', column.prop, 'desc')
  } else {
    emits('handleSortChange', '', '')
  }
}
onMounted(() => {
  const { order, orderType } = route.query
  if (order && orderType) {
    orderValue.value = order
    orderTypeValue.value = orderType
    console.log(orderValue.value, orderTypeValue.value)
  }
})
</script>
<style scoped lang="scss">
.example-showcase .el-loading-mask {
  z-index: 9;
}
.content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 18px 0;
}
.list_warrper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 1180px;
  background-color: #fff;
  padding: 0 20px;
}
.pagination_container {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 60px;
}
.full_name .abbr {
  word-break: normal;
}
.text_color_primary {
  color: #303133;
}
.text_color_secondary {
  color: #909399;
}
.el-table__row:hover > .el-table__cell .cell > .full_name {
  color: var(--el-color-primary);
  text-decoration: underline;
}
:deep() {
  .el-pagination__jump .el-input {
    border: 1px solid #dcdfe6;
    width: 46px;
  }
}
</style>
